<template>
    <MercBox
      v-model="model"
      title="选择数据"
      :lazy="true"
      :height="530"
      :width="1100"
      :padding="10"
    >
      <!-- 设置查询条件 -->
      <div style="padding-bottom: 10px">
        <span style="margin-right: 20px">请选择数据</span>
        <el-input
          placeholder="物料编号"
          style="width: 200px"
          v-model="MaterialNo"
        />
        <el-input
          placeholder="物料名称"
          style="width: 200px;margin-left: 10px;"
          v-model="Name"

        />
        <el-button
          type="primary"
          style="margin-left: 10px"
          size="medium"
          class="el-icon-zoom-out"
          @click="search"
          >搜索</el-button
        >
      </div>
      <!-- merc-table配置的这些属性见MercTable组件api文件  单选: :single="true"-->
      <merc-table
        ref="mytable"
        :loadKey="true"
        :columns="columns"
        :pagination="pagination"
        :pagination-hide="false"
        :max-height="380"
        :url="url"
        :index="true"
       
        :defaultLoadPage="false"
        @loadBefore="loadTableBefore"
      ></merc-table>
      <template #footer>
        <div>
          <el-button
            size="mini"
            type="primary"
            @click="addRow()"
            >添加选择的数据</el-button
          >
          <el-button size="mini" icon="el-icon-close" @click="model = false"
            >关闭</el-button
          >
        </div>
      </template>
    </MercBox>
  </template>
  <script>
  import MercBox from "@/components/basic/MercBox.vue";
  import MercTable from "@/components/basic/MercTable.vue";
  export default {
    components: {
        MercBox: MercBox,
        MercTable: MercTable,
    },
    data() {
      return {
        model: false,
        MaterialNo: "",
        Name:"",
        url: "",
        columns: [],
        pagination: {},
        detail: {}, //明细表选择的行
        add:(r)=>{},
        paramField:{},
        beforeQuery:(s)=>{}
      };
    },
    methods: {
      open(detail,url,paramField,field,callback,beforeQuery) {
        this.columns = field;
        this.paramField = paramField;
        this.detail = detail;
        this.url = url;
        this.add = callback;
        this.model = true;
        this.beforeQuery = beforeQuery;
        //打开弹出框时，加载table数据
        this.$nextTick(() => {
          this.$refs.mytable.load();
        });
      },
      search() {
        this.$refs.mytable.load();
      },
      addRow() {
        var rows = this.$refs.mytable.getSelected();
        if (!rows || rows.length == 0) {
          return this.$Message.error("请选择行数据");
        }
        this.add(rows);
        this.model = false;        
      },
      loadTableBefore(params) {
        //查询前，设置查询条件
        var arr = [
          { name: this.paramField.noField, value: this.MaterialNo, displayType: "like" },
          { name: this.paramField.nameField, value: this.Name, displayType: "like" }
          
          // { name: "MaterialNo", value: this.MaterialNo, displayType: "like" },
          // { name: "Name", value: this.Name, displayType: "like" }
        ];
        if(this.beforeQuery)
          arr=this.beforeQuery(arr);
        params.wheres = arr ;
        return true;
      },
    },
  };
  </script>